//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin button() {
    /* ==========================================================================
       Button

       Default Bootstrap and Mendix button
    ========================================================================== */

    .btn,
    .mx-button {
        display: inline-block;
        margin-bottom: 0;
        padding: 0.6em 1em;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        transition: all 0.2s ease-in-out;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        color: $btn-default-color;
        border: 1px solid $btn-default-border-color;
        border-radius: $btn-border-radius;
        background-color: $btn-default-bg;
        background-image: none;
        box-shadow: none;
        text-shadow: none;
        font-size: $btn-font-size;
        line-height: $line-height-base;

        &:hover,
        &:focus,
        &:active,
        &:active:focus {
            outline: none;
            box-shadow: none;
        }

        &[aria-disabled] {
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.65;
        }

        @if $btn-bordered != false {
            @extend .btn-bordered;
        }
    }

    // Mendix button link
    .mx-link {
        padding: 0;
        color: $link-color;

        &[aria-disabled="true"] {
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.65;
        }
    }

    .link-back {
        color: $font-color-detail;

        .glyphicon,
        .mx-icon-lined,
        .mx-icon-filled {
            top: 2px;
        }
    }

    // Images and icons in buttons
    .btn,
    .mx-button,
    .mx-link {
        img {
            //height: auto; // MXUI override who set the height on 16px default
            height: calc(#{$font-size-default} + 4px);
            margin-right: 4px;
            vertical-align: text-top;
        }
    }

    //== Phone specific
    //-------------------------------------------------------------------------------------------------------------------//
    .profile-phone {
        .btn,
        .mx-link {
            &:active {
                transform: translateY(1px);
            }
        }
    }
}
